<script setup>
// vue相关
import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
// 路由
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
// 组件
import navBack from "../components/navBack.vue";
import TemplateVideo from "../components/TemplateVideo.vue";
import DownloadProgress from "../components/DownloadProgress.vue";
// 提示框
import baseModel from "@/components/baseModel/baseModel.vue";
import store from "@/store/index.js";

const route = useRoute();
const model = ref(null);

// 工具引入
import utils from "@/common/utils/utils.js";

import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipVisible = ref(false)

import { notification } from "ant-design-vue";

import { VideoCameraFilled } from "@ant-design/icons-vue";
// 当前激活的tab栏
const activeTab = ref(1);
//
const detailInfo = ref(null);
const visible = ref(false); //控制弹窗显示隐藏
// 打开弹窗
const showModal = (info) => {
  console.log(info);
  detailInfo.value = info;
  visible.value = true;
};
// 关闭弹窗
const handleOk = () => {
  visible.value = false;
};
// 使用模板
const useTemplate = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true;
  } else {
    router.push({
      path: "/mixedCutCreat", //跳转创建混剪项目
      viewType: detailInfo.value?.viewType, //从哪个页面进入（1.模板详情，2：混剪详情）
      query: {
        id: detailInfo.value?.id, //详情id
        key: "id", //获取详情的id键名
        useType: "use", //区分模板使用的类型（edit：编辑，view:详情，use:使用）
        templateType: detailInfo.value?.templateType, //区分查看模板类型（1：我的模板 2为模板广场）
        typeofuse: detailInfo.value?.typeofuse, //区分点击使用的类型（squareTemplate模板广场）
        viewType: detailInfo.value?.viewType, //从哪个页面带过来（1：模板广场, 2：视频混剪）
      },
    });
  }

};
defineExpose({
  showModal,
  handleOk,
});
</script>

<template>
  <a-modal v-model:visible="visible" @ok="handleOk" centered width="1000px">
    <div class="info-header">
      <div class="info-header-left">{{ detailInfo?.name }}</div>
      <div class="info-header-right">
        <a-button type="primary" style="border-radius: 6px" @click="useTemplate">
          <VideoCameraFilled />
          使用模板
        </a-button>
      </div>
    </div>
    <div class="view_detail">
      <!-- 左侧视频 -->
      <div class="video_box">
        <!-- <TemplateVideo  /> -->
        <video :src="detailInfo.material_url" controls></video>
      </div>
      <!-- 右侧视频文本信息 -->
      <div class="video_information">
        <a-tabs v-model:activeKey="activeTab">
          <a-tab-pane tab="基本信息" :key="1">
            <div class="info-detail">
              <div class="desc-item">
                <span class="desc-title" style="">标题</span>
                <div class="desc-content">{{ detailInfo?.name }}</div>
              </div>
              <div class="desc-item">
                <span class="desc-title" style="">添加时间</span>
                <div class="desc-content">{{ detailInfo?.created_at }}</div>
              </div>
              <div class="desc-item">
                <span class="desc-title" style="">标签</span>
                <div class="desc-content">
                  <!-- <a-tag style="margin-bottom: 5px; cursor: pointer" @click="addTag"
                >+ 添加标签</a-tag
              > -->
                  <a-tag v-for="(item) in detailInfo.template_tags" :key="item.id" style="margin-bottom: 5px">
                    {{ item.name }}
                  </a-tag>

                </div>
              </div>
              <!-- <div class="desc-item">
                <span class="desc-title" style="">描述</span>
                <div class="desc-content">
                  可替换槽位{{ detailInfo?.material_number }}个
                </div>
              </div> -->
            </div>
          </a-tab-pane>
          <a-tab-pane tab="属性" :key="2">
            <div class="attribute">
              <div class="desc-item">
                <span class="desc-title" style="">模板比例</span>
                <div class="desc-content">
                  {{ detailInfo?.aspectRatioName }}（{{
                    detailInfo?.aspectRatio
                  }}）
                </div>
              </div>
              <div class="desc-item">
                <span class="desc-title" style="">视频尺寸</span>
                <div class="desc-content">
                  {{ detailInfo?.width_size }}
                  <span>(宽)</span> x
                  {{ detailInfo?.height_size }}
                  <span>(高)</span>
                </div>
              </div>
              <div class="desc-item">
                <span class="desc-title" style="">可替换槽位</span>
                <div class="desc-content">
                  {{ detailInfo?.tips }}
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </a-modal>

    <!-- 充值弹窗 -->
    <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

</template>
<style lang="less" scoped>
.info-header {
  display: flex;
  margin: 30px 0;
  height: 30px;
  justify-content: space-between;
  align-items: center;

  .info-header-right {
    background: #2878FF;
    padding: 0 5px;
    color: #fff;
  }
}

.view_detail {
  display: flex;
  height: 600px;

  // 左侧视频
  .video_box {
    width: 600px;
    height: 100%;
    background: black;
    margin-right: 30px;

    video {
      width: 100%;
      height: 100%;
    }
  }

  // 视频信息
  .video_information {
    width: 450px;
    padding-left: 30px;
    border-left: 1px solid #f0f0f0;

    .attribute,
    .info-detail {
      .desc-item {
        display: flex;
        margin-top: 20px;
        height: 50px;
        font-family: PingFangSC-Regular;
        align-items: center;

        .desc-title {
          color: #77797b;
          width: 70px;
        }

        .desc-content {
          font-weight: 400;
        }
      }
    }

    .info-detail {
      .desc-title {
        margin-right: 0;
      }
    }

    .attribute {
      .desc-title {
        margin-right: 30px;
      }
    }
  }
}
</style>
